<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.js"></script>
    <script src="node_modules/_vue-router@3.0.2@vue-router/dist/vue-router.js"></script>
    <style>
        .overHeight{
            height:2000px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--7、动态导航-->
        <router-link :to="{path:'child1'}">子组件1</router-link>
        <router-link to="/child2">子组件2</router-link>
        <router-link to="/child3/1">参数1</router-link>
        <router-link :to="{name:'child3', params:{id:2 }}">参数2</router-link>
        <router-link :to="{name:'child3', params:{id:3}, query: {username:'wq'}}">query参数</router-link>
        <router-link to="/child4-user">子组件4</router-link>
        <router-link to="/child6/8">组件6获取props</router-link>
        <router-link to="/child7">组件7获取props对象模式</router-link>
        <router-link to="/child8">路由元数据页面</router-link>
        <router-link to="/child10">研究滚动</router-link>
        <router-link to="/child11#title2">研究锚点滚动</router-link>
        <router-link to="/child100">瞎点</router-link>
        <router-view></router-view>

        <button @click = "handleprev()">向前一步</button>
        <button @click = "handleback()">向后一步</button>
    </div>

</body>
<script>

    const child1 = {
        template: `
                    <div>
                    <router-link to="/child1/child1">子组件的子组件1</router-link>
                    <router-link to="/child1/child2">子组件的子组件2</router-link>
                    <router-view></router-view></div>`,

        // 7. redirect不能触发导航守卫
        beforeRouteUpdate(to,from,next){
            console.log('123');
            next();
        }
    }
    const child2 = {
        template: `<div>组件2</div>`
    }

    // 2.动态路由参数

    const child3 = {
        template: `<div>{{$route.params.id}}</div>`,

        // 路由的参数发生变化不会触发组件的生命周期钩子，而是触发导航钩子
        // 检测路由参数的变化方法一：
        watch: {
            '$route'(to,from){ // es6语法 <=> $route: function(){}
                // console.log(from.params);
                // console.log(to.params);
            }
        },
        // 检测路由参数变化方法二：
        beforeRouteUpdate(to,from,next){
            console.log(to.params);
            console.log(to.query);
            // 必须执行next(),不然无法跳出方法
            next();
        }

    }

    // 3.通配符与pathMatch
    const child4 = {
        template: `<div>通配符与pathMatch</div>`,

        mounted(){

            //4. 编程式路由
            this.$router.push('/child4-id');
            console.log(this.$route.params.pathMatch);
        }
    }

    // 嵌套路由
    const child1child1 = {
        template: `<div>组件1的子组件</div>`
    }
    const child1child2 = {
        template: `<div>组件2的子组件</div>`
    }
    const child6 = {
        props:['id'],
        template: `<div>{{id}}</div>`
    }
    const child7 ={
        props: ['username'],
        template: `<div>对象模式{{username}}</div>`
    }
    const child8 = {
        template: `<div>路由元数据页面</div>`
    }
    const child8child = {
        template: `<div>child8的子组件</div>`
    }
    const child9 = {
        template: `<div>请登录</div>`
    }
    const child10 = {
        template:`<div class="overHeight">scrollbody</div>`
    }
    const child11 = {
        template: `<div>带hash的组件
                            <div class="overHeight">标题1</div>
                            <div id="title2" class="overHeight">标题2</div>
                    </div>`
    }
    const error = {
        template: `<div>你的页面找不到</div>`
    }

    const routes = [

        // 6.嵌套
        {path:'/', redirect: '/child1'},
        {path: '/child1', component: child1, children: [
                {path: 'child1', component: child1child1},
                {path: 'child2', component: child1child2}
            ]},
        // 8.别名
        {path: '/child2', component: child2, alias: '/qq'},
        {path: '/child3/:id', name: 'child3', component: child3},
        {path: '/child4-*', component: child4},
        // 9.路由与组件传参的布尔模式
        {path: '/child6/:id', component: child6, props:true},
        // 路由于组件传值的对象模式
        { path: '/child7', component: child7, props: { username: 'wangqing' } },
        { path: '/child8', component: child8, meta:{isLogin: false },children:[
            { path: 'child8', component: child8child }
        ]},
        { path: '/login', component: child9 },
        { path: '/child10', component: child10},
        { path: '/child11', component: child11},
        {path: '*', component:error }
    ]

    const router = new VueRouter({

        mode: 'history', // 配置成history可以去掉丑陋的#,但是需要在后端去配置404错误重定向

        routes:routes,

        // 必须匹配mode:'history'才能定义滚动行为
        scrollBehavior(to,from,savedPosition){
            // url中带有锚点，必须开启这个模式，不然导航到的是页面顶部，
            if(to.hash){
                return { selector: to.hash }
            }
            else if (savedPosition) {
                // 点击前进和后退按钮依然返回到之前的页面的上回浏览器的位置
                return savedPosition
            } else {
                // 从任何一个位置打开新的页面
                return { x: 0, y: 0 }
            }
            //异步调用滚动行为
            // return new Promise((resolve, reject)=>{
            //     setTimeout(()=>{
            //         resolve({x:0,y:1000})
            //     },1000)
            // })
        }
    })

    // 10.全局beforeEach钩子与matched与路由元数据配合实现鉴权
    router.beforeEach((to, from, next) => {
        let isLogin = to.matched.some(record => {
            return record.meta.isLogin === true || record.meta.isLogin == undefined;
        });
        if (isLogin) {
            next();
        } else {
            next('/login') // 确保一定要调用 next()
        }
    })

    // 1、在根组件中引入路由对象后，可以在任何组件中用this.$route访问当前路由，或用this.$router访问路由器对象
    const app = new Vue({
        el: '#app',
        router,
        mounted(){
            // console.log(this.$router);
            // console.log(route);
            // console.log(this.$route);
        },
        methods: {
            // 5.历史记录
            handleprev(){
                this.$router.go(1);
            },
            handleback(){
                this.$router.go(-1);
            }
        }
    })

// node+koa2+vue => 去哪儿+登录注册+搜索+订阅+聊天工具+购买+后台管理系统（用户管理+文章管理+商品管理）



</script>


</html>